<template>
    <div class="land-archives">
        <!-- 地图容器 -->
        <div id="promotionMap" style="width: 100%; height: 100%"></div>

        <div class="search-widget">
            <div class="region-search">
                <div class="region-search__wrapper">
                    <div class="region" @click="handleToggleRegion">
                        <div class="location"></div>
                        <div class="name">{{ queryParams.regionName }}</div>
                        <div class="arrow"></div>
                    </div>
                    <div class="input">
                        <el-input class="top-input" v-model="queryParams.input" placeholder="请输入您要寻找的资源" />
                    </div>
                    <div class="btn" @click="handleQueryConform(true)"></div>
                </div>
            </div>
        </div>

        <div class="land-filter">
            <div class="filter-item" :class="{ 'is-active': filterIndex === 1 }">
                <div class="filter-trigger" @click="handleToggleFilterOption(1)">
                    <span class="text">市场</span>
                    <div class="arrow"></div>
                </div>
                <div class="filter-panel">
                    <div class="options pirce-opts">
                        <div class="option" :class="queryParams.market === ''
                            ? 'option-selected'
                            : ''
                            " @click="queryParams.market = ''">
                            不限
                        </div>
                        <div class="option" :class="queryParams.market === '1'
                            ? 'option-selected'
                            : ''
                            " @click="queryParams.market = '1'">
                            一级市场
                        </div>
                        <div class="option" :class="queryParams.market === '2'
                            ? 'option-selected'
                            : ''
                            " @click="queryParams.market = '2'">
                            二级市场
                        </div>
                    </div>
                    <div class="operations">
                        <div class="btn btn-reset" @click="queryParams.market = ''">
                            重置
                        </div>
                        <div class="btn btn-confirm" @click="handleQueryConform">
                            确定
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-item" :class="{ 'is-active': filterIndex === 2 }">
                <div class="filter-trigger" @click="handleToggleFilterOption(2)">
                    <span class="text">价格</span>
                    <div class="arrow"></div>
                </div>
                <div class="filter-panel">
                    <div class="options pirce-opts">
                        <div class="option" :class="queryParams.price?.length === 0
                            ? 'option-selected'
                            : ''
                            " @click="queryParams.price = []">
                            不限
                        </div>
                        <div class="option" v-for="(item, index) in priceOpts" :key="index" :class="queryParams.price.includes(item.value)
                            ? 'option-selected'
                            : ''
                            " @click="handlePriceFilter(item.value)">
                            {{ item.label }}
                        </div>
                    </div>
                    <div class="custom">
                        <div class="custom-label">自定义价格(万元)</div>
                        <div class="custom-range">
                            <el-input class="range-input" :class="errorPrice !== '' ? 'error-input' : ''"
                                v-model="customPriceMin" placeholder="输入价格下限(万)"
                                oninput="value=value.replace(/[^\d]/g,'')" />
                            <span class="range-text">至</span>
                            <el-input class="range-input" :class="errorPrice !== '' ? 'error-input' : ''"
                                v-model="customPriceMax" placeholder="输入价格上限(万)"
                                oninput="value=value.replace(/[^\d]/g,'')" />
                        </div>
                        <div class="range-error">
                            <Transition name="el-zoom-in-top">
                                <p v-if="errorPrice !== ''" class="error-text">
                                    {{ errorPrice }}
                                </p>
                            </Transition>
                        </div>
                    </div>
                    <div class="operations">
                        <div class="btn btn-reset" @click="handlePriceReset">
                            重置
                        </div>
                        <div class="btn btn-confirm" @click="handleQueryConform">
                            确定
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-item" :class="{ 'is-active': filterIndex === 3 }">
                <div class="filter-trigger" @click="handleToggleFilterOption(3)">
                    <span class="text">分类</span>
                    <div class="arrow"></div>
                </div>
                <div class="filter-panel">
                    <div class="cascader">
                        <div class="cascader-part" v-for="(column, columnIndex) in catalogOpts" :key="columnIndex"
                            :style="{ 'flex-grow': curColumnIndex === columnIndex ? 2 : 1 }">
                            <div class="cascader-part__column" v-if="column?.length > 0">
                                <div class="column-node" v-for="(node, index) in column" :key="index"
                                    :class="node.code === extendCode ? 'is-extend' : '', node.code === queryParams.catalog ? 'is-checked' : ''"
                                    @click="handleCatalogExtend(node, columnIndex)">
                                    <div class="node-text">{{ node.name }}</div>
                                    <div class="check-circle" @click.stop="handleCatalogChecked(node, columnIndex)"></div>
                                </div>
                            </div>
                            <div class="cascader-part__empty" v-else>
                                <div class="img"></div>
                                <div class="text">暂无数据</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-item" :class="{ 'is-active': filterIndex === 4 }">
                <div class="filter-trigger" @click="handleToggleFilterOption(4)">
                    <span class="text">更多</span>
                    <div class="arrow"></div>
                </div>
                <div class="filter-panel">
                    <div class="tabs">
                        <div class="right-content">
                            <div class="content">
                                <div class="content-label">面积</div>
                                <div class="options">
                                    <div class="option" :class="queryParams.mj?.length === 0
                                        ? 'option-selected'
                                        : ''
                                        " @click="queryParams.mj = []">
                                        不限
                                    </div>
                                    <div class="option" v-for="(item, index) in mjOpts" :key="index" :class="queryParams.mj.includes(item.value)
                                        ? 'option-selected'
                                        : ''
                                        " @click="handleMjFilter(item.value)">
                                        {{ item.label }}
                                    </div>
                                </div>
                                <div class="content-range">
                                    <el-input class="range-input" :class="errorMj !== '' ? 'error-input' : ''
                                        " v-model="customMjMin" placeholder="输入面积下限(亩)"
                                        oninput="value=value.replace(/[^\d]/g,'')" />
                                    <span class="range-text">至</span>
                                    <el-input class="range-input" :class="errorMj !== '' ? 'error-input' : ''
                                        " v-model="customMjMax" placeholder="输入面积上限(亩)"
                                        oninput="value=value.replace(/[^\d]/g,'')" />
                                    <div class="range-error">
                                        <Transition name="el-zoom-in-top">
                                            <p v-if="errorMj !== ''" class="error-text">
                                                {{ errorMj }}
                                            </p>
                                        </Transition>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="content-label">利用状态</div>
                                <div class="options">
                                    <div class="option" :class="queryParams.lyzt?.length === 0
                                        ? 'option-selected'
                                        : ''
                                        " @click="queryParams.lyzt = []">
                                        不限
                                    </div>
                                    <div class="option" v-for="(item, index) in lyztOpts" :key="index" :class="queryParams.lyzt.includes(
                                        item.value
                                    )
                                        ? 'option-selected'
                                        : ''
                                        " @click="handlelyztFilter(item.value)">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <div class="content-label">权属主体</div>
                                <div class="options">
                                    <div class="option" :class="queryParams.owner === ''
                                        ? 'option-selected'
                                        : ''
                                        " @click="queryParams.owner = ''">
                                        不限
                                    </div>
                                    <div class="option" :class="queryParams.owner === '1'
                                        ? 'option-selected'
                                        : ''
                                        " @click="queryParams.owner = '1'">
                                        国家
                                    </div>
                                    <div class="option" :class="queryParams.owner === '2'
                                        ? 'option-selected'
                                        : ''
                                        " @click="queryParams.owner = '2'">
                                        集体
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="operations">
                        <div class="btn btn-reset" @click="handleMoreReset">
                            重置
                        </div>
                        <div class="btn btn-confirm" @click="handleQueryConform">
                            确定
                        </div>
                    </div>
                </div>
            </div>
            <div class="filter-item" :class="{ 'is-active': filterIndex === 5 }">
                <div class="filter-trigger" @click="handleToggleFilterOption(5)">
                    <span class="text">排序</span>
                    <div class="arrow"></div>
                </div>
                <div class="filter-panel">
                    <div class="sorts">
                        <div class="sort" :class="queryParams.sort === 5 ? 'sort-selected' : ''
                            " @click="sortChange(5)">
                            按利用状态升序
                        </div>
                        <div class="sort" :class="queryParams.sort === 6 ? 'sort-selected' : ''
                            " @click="sortChange(6)">
                            按利用状态降序
                        </div>
                        <div class="sort" :class="queryParams.sort === 1 ? 'sort-selected' : ''
                            " @click="sortChange(1)">
                            价格由低到高
                        </div>
                        <div class="sort" :class="queryParams.sort === 2 ? 'sort-selected' : ''
                            " @click="sortChange(2)">
                            价格由高到低
                        </div>
                        <div class="sort" :class="queryParams.sort === 3 ? 'sort-selected' : ''
                            " @click="sortChange(3)">
                            发布时间升序
                        </div>
                        <div class="sort" :class="queryParams.sort === 4 ? 'sort-selected' : ''
                            " @click="sortChange(4)">
                            发布时间降序
                        </div>
                    </div>
                    <!-- <div class="operations">
                        <div class="btn btn-reset" @click="queryParams.sort = 4">
                            重置
                        </div>
                        <div class="btn btn-confirm" @click="handleQueryConform">
                            确定
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <div role="mask" style="inset: 0; position: fixed; z-index: 200" @click="filterIndex = 0" v-if="filterIndex > 0">
        </div>

        <div class="require-btn" @click="handlePostDemand"></div>

        <div class="smart-box" @click="handleSmartBox">
            <div class="box"></div>
            <div class="badge" v-show="count > 0">{{ count }}</div>
        </div>

        <div class="search-result">
            <!-- <div>isFromApp：{{ urlData.isFromApp }}</div>
            <div>region：{{ urlData.region }}</div>
            <div>regionName：{{ decodeURIComponent(urlData.regionName) }}</div>
            <div>defCatalog：{{ urlData.defCatalog }}</div>
            <div>input：{{ decodeURIComponent(urlData.input) }}</div> -->
            <div class="search-result__trigger" @touchstart.stop="handleTouchStart" @touchmove.stop="handleTouchMove"
                @touchend="handleTouchEnd">
            </div>
            <el-scrollbar ref="scrollbarRef" :height="`${scrollBarHeight}px`"
                :wrap-style="{ transition: `all ${transTime}s` }">
                <ul v-infinite-scroll="loadNextPage" :infinite-scroll-immediate="false"
                    :infinite-scroll-disabled="ifDisabled" v-if="showList.length > 0">
                    <li v-for="(item, index) in showList" :key="index">
                        <div class="search-result__item" :class="curLandId === item.id ? 'current' : ''"
                            @click="goToDetails(item)">
                            <img :src="item.coverImgUrl" width="120" height="106" class="cover" />
                            <div class="content">
                                <div class="title">{{ item.title }}</div>
                                <div class="digit">
                                    <span class="price" v-show="item.price">{{ item.price }}</span>
                                    <span class="area">{{ item.mj }}㎡</span>
                                </div>
                                <div class="location">
                                    <span class="icon"></span>
                                    <span class="text">{{ item.showLocation }}</span>
                                </div>
                                <div class="tags">
                                    <span class="item">{{ item.catalogName }}</span>
                                    <span class="item" v-show="item.lzlx">{{ item.showlzlx }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="search-result__item" v-if="index !== 0 && index % 4 === 0" @click="handlePostDemand">
                            <div class="info-row">
                                <div class="info-img"></div>
                                <div class="info-text">
                                    <span class="info-text__bold">没有看到心仪的服务？我们帮你找找</span>
                                    <span>填写需求详情，让我们更懂您</span>
                                </div>
                                <div class="info-arrow"></div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div v-else class="no-data">
                    <div class="no-data__img"></div>
                    <div>没找到心仪的商品？快来发布您的需求，</div>
                    <div>让我们帮您寻找！</div>
                    <div class="no-data__btn" @click="handlePostDemand">立即发布</div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import useAppStore from "@/store/modules/app";
import { api_getQuery, api_getTDLXTree } from "@/api/promotion.js";
import Cookies from "js-cookie";
import defImg from "@/assets/images/tmp/placeholder.png";
import * as turf from "@turf/turf";

const appStore = useAppStore();
const urlData = computed(() => {
    return appStore.urlData || {};
});

const count = computed(() => {
    return appStore.urlData.count || 0;
})

let map = null;
let showList = ref([]);
let allList = [];
let curPage = 1;
const pageSize = 10;
let total = 0;
let ifDisabled = ref(false);
let queryParams = reactive({
    region: "", // 行政区划id字符串，以逗号分隔，全国时为空
    regionName: "全国",
    input: "",
    market: "",
    price: [],
    catalog: "不限",
    defCatalog: null,
    mj: [],
    lyzt: [],
    owner: "",
    sort: 4,
});
let customPriceMin = ref();
let customPriceMax = ref();
let customMjMin = ref();
let customMjMax = ref();
const priceOpts = ref([
    {
        label: "<50万",
        value: 1,
    },
    {
        label: "50-100万",
        value: 2,
    },
    {
        label: "100-1000万",
        value: 3,
    },
    {
        label: "1000-5000万",
        value: 4,
    },
    {
        label: "≥5000万",
        value: 5,
    },
]);
const mjOpts = ref([
    {
        label: "<10亩",
        value: 1,
    },
    {
        label: "10-100亩",
        value: 2,
    },
    {
        label: "100-1000亩",
        value: 3,
    },
    {
        label: "≥1000亩",
        value: 4,
    },
]);
const lyztOpts = ref([
    {
        label: "交易中",
        value: "5",
    },
    {
        label: "储备",
        value: "3",
    },
    {
        label: "潜力/存量",
        value: "1,2",
    },
]);
let catalogOpts = ref([[], [], [], []]);
let curColumnIndex = ref(0);
let extendCode = ref('不限');

watch(
    () => customPriceMin,
    () => {
        handleCustomPriceCompare();
    },
    { deep: true }
);

watch(
    () => customPriceMax,
    () => {
        handleCustomPriceCompare();
    },
    { deep: true }
);

watch(
    () => customMjMin,
    () => {
        handleCustomMjCompare();
    },
    { deep: true }
);

watch(
    () => customMjMax,
    () => {
        handleCustomMjCompare();
    },
    { deep: true }
);

// 切换区域
function handleToggleRegion() {
    const obj = {
        ...toRaw(queryParams),
        customPriceMin: customPriceMin.value,
        customPriceMax: customPriceMax.value,
        customMjMin: customMjMin.value,
        customMjMax: customMjMax.value,
    };
    Cookies.set("queryParams", JSON.stringify(obj));

    webUni.postMessage({
        data: {
            type: "uni",
            action: "TOGGLE_REGION",
        },
    });

    // 微信特殊处理
    if (wx.miniProgram) {
        wx.miniProgram.navigateTo({
            url: "/pages/region/region?fromH5=1",
        });
    }
}

// 发布需求
function handlePostDemand() {
    // 微信特殊处理
    if (wx.miniProgram) {
        wx.miniProgram.navigateTo({
            url: '/pagesBusiness/buyer/buyer'
        });
    }
}

// 初始化
function initMap() {
    let mapTimer = setInterval(() => {
        if (window.aMapLoaded) {
            clearInterval(mapTimer);
            mapTimer = null;

            map = new AMap.Map("promotionMap", {
                center: [106.78919169, 32.66879934],
                zoom: 5,
                zooms: [4, 20],
                mapStyle: "amap://styles/whitesmoke",
                doubleClickZoom: false,
            });

            map.on("complete", () => {
                // 获取土地类型数据
                api_getTDLXTree().then((res) => {
                    const arr = [
                        {
                            id: 9999,
                            code: "不限",
                            name: "不限",
                            nodeLevel: 1,
                            parentCode: null,
                            parentName: null,
                            children: [],
                        },
                    ];
                    catalogOpts.value[0] = res.data ? arr.concat(res.data) : arr;
                    if (urlData.value.isFromApp) {
                        if (
                            urlData.value.isFromApp === "1" &&
                            urlData.value.defCatalog
                        ) {
                            catalogOpts.value[0] = res.data.filter(
                                (i) => i.code === urlData.value.defCatalog
                            );
                        }
                    }
                    // 获取数据，根据行政层级聚合点位
                    let params = {};
                    if (queryParams.region !== "") {
                        const arr = queryParams.region.split(",");
                        // params.region = arr[arr.length - 1];
                        params.region = queryParams.region;
                    }
                    if (queryParams.defCatalog) {
                        queryParams.catalog = queryParams.defCatalog;
                        params.catalog = queryParams.defCatalog;
                    }
                    if (queryParams.input) {
                        params.input = queryParams.input;
                    }
                    /* if (urlData.value.districtCode) {
                        params.region = urlData.value.districtCode
                    } */
                    if (urlData.value.tdlxCode) {
                        params.tdlxCode = urlData.value.tdlxCode
                    }
                    console.log('params: ', params)
                    getLandData(params);
                });
            });
        }
    }, 100);
}

// 点聚合
let cluster;
let selectedId = null;
let infoMarkers = [];
let points = [];
function getLandData(params, ifUpList = false) {
    api_getQuery(params).then((res) => {
        curPage = 1;
        ifDisabled.value = false;
        allList = [];
        total = 0;
        showList.value = 0;
        if (infoMarkers?.length > 0) {
            infoMarkers.forEach((m) => {
                m.off(
                    "touchend",
                    (e) => {
                        goToDetails({ id: context.clusterData[0].id })
                    },
                    null,
                    true
                );
                m.remove();
            });
            infoMarkers = [];
        };
        if (ifUpList) {
            transTime.value = 0.3;
            scrollBarHeight.value = maxHeight / 2;
        }
        if (res.data?.length > 0) {
            const data = res.data.filter((i) => i.lnglat && i.xzqbm);
            if (data.length > 0 && (urlData.value.districtCode || urlData.value.tdlxCode)) {
                ElMessage({
                    message: "已为您筛选与您需求匹配资源",
                    type: "success",
                    offset: 90
                });
            }
            allList = data.map((i) => {
                return {
                    ...i,
                    coverImgUrl: i.coverImgUrl !== null ? i.coverImgUrl : defImg,
                    title: handleCirculationType(i.lzlx) + handleDistrictMontage(i, ""),
                    price: handlePrice(i.price, i.priceUnit),
                    showLocation: handleDistrictMontage(i, "|"),
                    showlzlx: handleCirculationType(i.lzlx)
                }
            });
            total = data.length;
            showList.value = allList.slice(0, pageSize);
            points = allList.map((i) => {
                const lng = Number(i.lnglat.split(",")[0]);
                const lat = Number(i.lnglat.split(",")[1]);

                let infoMarker = new AMap.Marker({
                    position: [lng, lat],
                    offset: [0, -44],
                    extData: {
                        id: `info${i.id}`,
                    },
                    zIndex: 11
                });
                let infoDiv = document.createElement("div");
                infoDiv.setAttribute("id", "info-marker");
                infoDiv.innerHTML = `
                    <div class="location">${handleDistrictMontage(i, "|")}</div>
                    <div class="number">NO.${i.identificationCode}</div>
                    <div class="row red">
                        <div class="label">价格：</div><div class="value">${i.price}</div>
                    </div>
                    <div class="row">
                        <div class="label">面积：</div><div class="value">${i.mj}㎡</div>
                    </div>
                `;
                /* let infoDiv = document.createElement('div');
                infoDiv.style.cssText = 'white-space: nowrap;';
                infoDiv.innerHTML = `
                    <div>储备</div>
                `; */
                infoMarker.setContent(infoDiv);
                infoMarkers.push(infoMarker);

                return {
                    ...i,
                    country: "全国",
                    lnglat: [lng, lat],
                };
            });
            if (!cluster) {
                map.plugin("AMap.IndexCluster", () => {
                    cluster = new AMap.IndexCluster(map, points, {
                        renderClusterMarker: _renderClusterMarker,
                        clusterIndexSet: _clusterIndexSet(queryParams.region),
                    });
                    handleMapFitView(curMaxZoom);
                });
            } else {
                cluster.setData(points);
                handleMapFitView(curMaxZoom);
            }
        } else if (cluster) {
            cluster.setData([]);
        }
    });
}

// 自定义聚合点样式
function _renderClusterMarker(context) {
    const key = context.index.mainKey;
    let div = document.createElement("div");
    if (key === "id") {
        selectedId === context.clusterData[0].id
            ? div.setAttribute("id", "single-marker-selected")
            : div.setAttribute("id", "single-marker");
        context.marker.setExtData({ id: context.clusterData[0].id });
        infoMarkers.forEach((m) => {
            if (m.getExtData().id === `info${context.clusterData[0].id}`) {
                m.add(map);
                m.on(
                    "touchend",
                    (e) => {
                        goToDetails({ id: context.clusterData[0].id })
                    },
                    null,
                    true
                );
            }
        });
    } else {
        infoMarkers.forEach((m) => {
            m.off(
                "touchend",
                (e) => {
                    goToDetails({ id: context.clusterData[0].id })
                },
                null,
                true
            );
            m.remove();
        });
        const name = context.clusterData[0][key];
        div.setAttribute("id", "cluster-marker");
        div.innerHTML = `
    <div class="inner">
        <div class="content">
            <div class="item">${name}</div>
            <div class="item">${context.count}宗</div>
        </div>
    </div>`;
    }
    context.marker.setContent(div);
    context.marker.setAnchor("bottom-center");
    // 自定义点击事件
    context.marker.on(
        "touchend",
        (e) => {
            // 点击村级点位，切换选中状态
            if (key === "id") {
                cluster.I.forEach((m) => {
                    let newDiv = document.createElement("div");
                    if (m.getExtData().id !== e.target.getExtData().id) {
                        newDiv.setAttribute("id", "single-marker");
                    } else {
                        newDiv.setAttribute("id", "single-marker-selected");
                    }
                    m.setContent(newDiv);
                });
                selectedId = e.target.getExtData().id;
                handleSelectedMarker(selectedId);
            } else {
                // 点击聚合点，层级下钻
                // zoomList = [4, 6, 8, 10, 12, 20];
                let z = map.getZoom();
                if (z < 6) {
                    z = 6;
                } else if (z < 8) {
                    z = 8;
                } else if (z < 10) {
                    z = 10;
                } else if (z < 12) {
                    z = 12;
                }
                const key = context.index.mainKey;
                const index = Object.keys(ruleObj).findIndex((i) => i === key);
                const nextKey = Object.keys(ruleObj)[index + 1];
                const nextCluster = group(context.clusterData, nextKey);
                const center = getCenter(nextCluster, context.index.mainKey);
                map.setZoomAndCenter(z, center, true);
            }
        },
        null,
        true
    );
}

// 定义点聚合规则
let curMaxZoom = 5;
let ruleObj = {};
function _clusterIndexSet(data) {
    let regionList = ["province", "city", "area", "street", "id"];
    let zoomList = [4, 6, 8, 10, 12, 20];
    let obj = {};
    if (data !== "") {
        const index = data.split(",").length;
        curMaxZoom = zoomList[index];
        regionList = regionList.slice(index);
        zoomList = [4, ...zoomList.slice(index + 1)];
        map.setZooms([curMaxZoom - 1, 20]);
    }
    regionList.forEach((key, index) => {
        obj[key] = {
            minZoom: zoomList[index],
            maxZoom: zoomList[index + 1],
        };
    });
    ruleObj = obj;
    return obj;
}

// 根据覆盖物情况地图缩放至合适视野
function handleMapFitView(maxZoom) {
    const markers = map.getAllOverlays();
    map.setFitView(markers, false, [100, 100, 100, 100], maxZoom);
}

// 根据相同字段值对数组进行分组
function group(arr, filed) {
    let temObj = {};
    let resArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (!temObj[arr[i][filed]]) {
            resArr.push({
                key: arr[i][filed],
                data: [arr[i]]
            });
            temObj[arr[i][filed]] = arr[i]
        } else {
            for (let j = 0; j < resArr.length; j++) {
                if (arr[i][filed] === resArr[j].key) {
                    resArr[j].data.push(arr[i]);
                    break
                }
            }
        }
    }
    return resArr
}

// 计算聚合点范围
function getCenter(arr, key) {
    let lnglats = [];
    arr.forEach((ele) => {
        let coors = ele.data.map((i) => [i.lnglat.lng, i.lnglat.lat]);
        if (coors.length >= 3) {
            coors.push(coors[0]);
            const polygon = turf.polygon([
                coors
            ]);
            const centroid = turf.centroid(polygon);
            const coordinates = [Number(centroid.geometry.coordinates[0].toFixed(6)), Number(centroid.geometry.coordinates[1].toFixed(6))];
            lnglats.push(coordinates);
        } else if (coors.length === 2) {
            const point1 = turf.point(coors[0]);
            const point2 = turf.point(coors[1]);
            const distance = turf.distance(point1, point2);
            if (distance < 10) {
                lnglats.push(coors[0]);
            } else {
                const midpoint = turf.midpoint(point1, point2);
                const coordinates = [Number(midpoint.geometry.coordinates[0].toFixed(6)), Number(midpoint.geometry.coordinates[1].toFixed(6))];
                lnglats.push(coordinates);
            }
        } else if (coors.length === 1) {
            lnglats.push(coors[0]);
        } else {
            return;
        }
    });
    if (key === "street") {
        let distanceArr = [];
        lnglats.forEach((ele, index) => {
            if (index > 0) {
                const point1 = turf.point(lnglats[0]);
                const point2 = turf.point(ele);
                distanceArr.push(turf.distance(point1, point2));
            }
        })
        if (distanceArr.some((i) => i > 2)) {
            return lnglats[0];
        }
    }
    const features = turf.points(lnglats);
    const center = turf.center(features);
    return center.geometry.coordinates;
}

// 地图选中点位，联动列表
let curLandId = ref();
function handleSelectedMarker(id) {
    transTime.value = 0.3;
    scrollBarHeight.value = maxHeight / 2;
    curLandId.value = id;
    allList.map((item, index) => {
        if (item.id === id) {
            allList.unshift(allList.splice(index, 1)[0]);
        }
    });
    showList.value = allList.slice(0, curPage * pageSize);
}

// 切换筛选项
const filterIndex = ref(0);
function handleToggleFilterOption(index) {
    filterIndex.value === index
        ? (filterIndex.value = 0)
        : (filterIndex.value = index);
}

// 处理价格选中项
function handlePriceFilter(value) {
    if (!queryParams.price.includes(value)) {
        queryParams.price.push(value);
        queryParams.price.sort();
    } else {
        queryParams.price = queryParams.price.filter((i) => i !== value);
        queryParams.price.sort();
    }
    if (queryParams.price?.length === 5) queryParams.price = [];
}

// 比较自定义价格区间
let errorPrice = ref("");
function handleCustomPriceCompare() {
    queryParams.price = [];
    if (customPriceMax.value || customPriceMin.value) {
        if (Number(customPriceMax.value) - Number(customPriceMin.value) > 0) {
            errorPrice.value = "";
        } else {
            errorPrice.value = "请输入正确价格区间";
        }
    }
}

// 重置价格
function handlePriceReset() {
    queryParams.price = [];
    errorPrice.value = "";
    customPriceMin.value = undefined;
    customPriceMax.value = undefined;
}

// 处理面积选中项
function handleMjFilter(value) {
    if (!queryParams.mj.includes(value)) {
        queryParams.mj.push(value);
        queryParams.mj.sort();
    } else {
        queryParams.mj = queryParams.mj.filter((i) => i !== value);
        queryParams.mj.sort();
    }
    if (queryParams.mj?.length === 4) queryParams.mj = [];
}

// 比较自定义面积区间
let errorMj = ref("");
function handleCustomMjCompare() {
    queryParams.mj = [];
    if (customMjMax.value || customMjMin.value) {
        if (Number(customMjMax.value) - Number(customMjMin.value) > 0) {
            errorMj.value = "";
        } else {
            errorMj.value = "请输入正确面积区间";
        }
    }
}

// 重置面积
function handleMjReset() {
    queryParams.mj = [];
    errorMj.value = "";
    customMjMin.value = undefined;
    customMjMax.value = undefined;
}

// 处理利用状态选中项
function handlelyztFilter(value) {
    if (!queryParams.lyzt.includes(value)) {
        queryParams.lyzt.push(value);
        queryParams.lyzt.sort();
    } else {
        queryParams.lyzt = queryParams.lyzt.filter((i) => i !== value);
        queryParams.lyzt.sort();
    }
    if (queryParams.lyzt?.length === 3) queryParams.lyzt = [];
}

// 重置更多
function handleMoreReset() {
    handleMjReset();
    queryParams.lyzt = [];
    queryParams.owner = "";
}

// 分类节点展开事件
function handleCatalogExtend(node, index) {
    if (index < 3) {
        catalogOpts.value[index + 1] = node.children;
        if (node.code === '不限') {
            const arr = [...toRaw(catalogOpts.value[0])];
            catalogOpts.value = [arr, [], [], []];
        } else if (index === 0) {
            catalogOpts.value[2] = [];
            catalogOpts.value[3] = [];
        }
    }
    curColumnIndex.value = index;
    extendCode.value = node.code;
}

// 分类节点选中事件
function handleCatalogChecked(node, index) {
    queryParams.catalog = node.code;
    handleCatalogExtend(node, index);
    handleQueryConform();
}

// 排序选中事件
function sortChange(val) {
    queryParams.sort = val;
    handleQueryConform();
}

// 查询确定
function handleQueryConform(ifUpList = false) {
    if (errorPrice.value === "" && errorMj.value === "") {
        let params = {
            input: queryParams.input,
            owner: queryParams.owner,
            sort: queryParams.sort,
            market: queryParams.market,
        };
        if (queryParams.region !== "") {
            const arr = queryParams.region.split(",");
            params.region = arr[arr.length - 1];
        }
        if (
            queryParams.catalog !== "不限"
        ) {
            params.catalog = queryParams.catalog;
        }
        if (queryParams.price.length > 0) {
            params.price = queryParams.price.join(",");
        }
        if (customPriceMin.value && customPriceMax.value) {
            params.minPrice = customPriceMin.value;
            params.maxPrice = customPriceMax.value;
        }
        if (queryParams.mj.length > 0) {
            params.mj = queryParams.mj.join(",");
        }
        if (customMjMin.value && customMjMax.value) {
            params.minMj = customMjMin.value;
            params.maxMj = customMjMax.value;
        }
        if (queryParams.lyzt.length > 0) {
            params.lyzt = queryParams.lyzt.join(",");
        }
        getLandData(params, ifUpList);
        filterIndex.value = 0;
    }
}

// 结果面板高度
const scrollBarHeight = ref(0);
// touch的起始位置
let touchStartY = 0;
// 原始高度
let originHeight = 0;
// 移动方向
let moveUp = false;
// 移动距离
let deltaY = 0;
// 最大高度，微信设备需要减去300
const maxHeight = window.device === "wx" ? 800 - 300 : 800;
const transTime = ref(0);
const scrollbarRef = ref();
function handleTouchStart(e) {
    // console.log('touchstart: ', e, scrollbarRef.value.offsetHeight)
    const touch = e.touches[0];
    touchStartY = touch.pageY;

    originHeight = unref(scrollBarHeight.value);
    transTime.value = 0;
}
function handleTouchMove(e) {
    // console.log('touchmove: ', e)
    const touch = e.touches[0];

    // 上下滑动的距离
    deltaY = touchStartY - touch.pageY;

    // 限制反应范围，避免点击时滑动
    if (deltaY > -10 && deltaY < 10) {
        return;
    }

    if (deltaY > 0 && scrollBarHeight.value !== maxHeight) {
        moveUp = true;
    } else {
        moveUp = false;
    }

    deltaY = originHeight + deltaY;
    // console.log('deltaY: ', deltaY, originHeight)
    scrollBarHeight.value = deltaY;
}
function handleTouchEnd() {
    transTime.value = 0.3;
    if (moveUp) {
        if (deltaY <= maxHeight / 2) {
            scrollBarHeight.value = maxHeight / 2;
        } else {
            scrollBarHeight.value = maxHeight;
        }
    } else {
        if (deltaY >= maxHeight / 2) {
            scrollBarHeight.value = maxHeight / 2;
        } else {
            scrollBarHeight.value = 0;
        }
    }
}
// 懒加载
const loadNextPage = () => {
    if (curPage * pageSize >= total) {
        ifDisabled.value = true;
    } else {
        showList.value = [
            ...toRaw(showList.value),
            ...allList.slice(curPage * pageSize, (curPage + 1) * pageSize),
        ];
        curPage += 1;
    }
};

onMounted(() => {
    if (urlData.value.isFromApp) {
        queryParams.region = urlData.value.region ? urlData.value.region : "";
        queryParams.regionName = urlData.value.regionName
            ? decodeURIComponent(urlData.value.regionName)
            : "全国";
        // 从app页面跳转，清空Cookie
        if (urlData.value.isFromApp === "1") {
            queryParams.defCatalog = urlData.value.defCatalog
                ? urlData.value.defCatalog
                : null;
            queryParams.input = urlData.value.input
                ? decodeURIComponent(urlData.value.input)
                : "";
            Cookies.set("queryParams", "");
        } else if (urlData.value.isFromApp === "0") {
            // 从当前页的区域选择跳转，取cookie回显
            if (Cookies.get("queryParams")) {
                const obj = JSON.parse(Cookies.get("queryParams"));
                queryParams.input = obj.input;
                queryParams.price = obj.price;
                queryParams.catalog = obj.catalog;
                queryParams.defCatalog = obj.defCatalog;
                queryParams.mj = obj.mj;
                queryParams.lyzt = obj.lyzt;
                queryParams.owner = obj.owner;
                queryParams.sort = obj.sort;
                if (obj.customPriceMin)
                    customPriceMin.value = obj.customPriceMin;
                if (obj.customPriceMax)
                    customPriceMax.value = obj.customPriceMax;
                if (obj.customMjMin) customMjMin.value = obj.customMjMin;
                if (obj.customMjMax) customMjMax.value = obj.customMjMax;
            }
        }
    } else {
        ElMessage({
            message: "传参错误！",
            type: "warning",
            offset: 90
        });
    }

    // 清除地图数据
    map && (map = undefined);

    // 注意：异步回调函数的声明应该在 JSAPI 引入之前，函数名与callback=onLoad中对应
    initMap();
});

// 流转类型字典
function handleCirculationType(data, isKey = false) {
    const dir = {
        使用权转让: 1,
        使用权出租: 2,
        使用权入股: 3,
        承包经营权出租: 4,
	    取水权出租: 5
    };
    if (isKey) {
        return dir[data];
    } else {
        return Object.keys(dir).find((i) => dir[i] === data);
    }
}

// 行政区划拼接
function handleDistrictMontage(data, splitSymbol) {
    const len = data.xzqbm.split(",").length;
    const full = [
        data.province,
        data.city,
        data.area,
        data.street,
        data.village,
    ];
    return full.slice(0, len).join(splitSymbol);
}

// 跳转土地详情
function goToDetails(data) {
    curLandId.value = data.id;

    // 微信特殊处理
    if (wx.miniProgram) {
        wx.miniProgram.navigateTo({
            url: `/pages/resource/view?id=${data.id}&isMap=${true}`,
        });
    }
}

// 跳转智选盒
function handleSmartBox() {
    // 微信特殊处理
    if (wx.miniProgram) {
        wx.miniProgram.navigateTo({
            url: "/pagesSmartBox/index/index",
        });
    }
}

// 处理价格
function handlePrice(price, priceUnit) {
    // 处理价格(元 -> 万元)
    let cPrice = '';
    if (price) {
        cPrice = price + '万元';

        // 元/亩/年 转为 万元/㎡/年
        if (priceUnit && Number(priceUnit) === 3) {
            // cPrice = (Number(price) / 10000 * 666.67).toFixed(2) + '万元/㎡/年';
            cPrice = price + '万元/㎡/年';
        } else if (priceUnit && Number(priceUnit) === 2) {
            cPrice = price + '万元/年';
        }
    } else {
        cPrice = '面议';
    }
    return cPrice
}
</script>

<style lang="scss" scoped>
.land-archives {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.search-widget {
    padding: 8px 10px 0 10px;
    position: fixed;
    top: 0;
    z-index: 201;
    width: 100%;
    background: #fff;

    .region-search {
        height: 36px;
        border-radius: 10px;
        padding: 1px;
        background: linear-gradient(192deg,
                rgba(1, 211, 150, 1) 0%,
                rgba(0, 194, 237, 1) 100%);

        &__wrapper {
            width: 100%;
            height: 100%;
            background: #ffffff;
            display: flex;
            align-items: center;
            border-radius: 10px;

            .region {
                display: flex;
                align-items: center;

                .location {
                    margin-left: 10px;
                    width: 18px;
                    height: 18px;
                    background: url("../../assets/images/promotion/location.png") no-repeat;
                    background-size: cover;
                }

                .name {
                    padding: 0 4px;
                    color: #242832;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 20px;
                }

                .arrow {
                    margin: 2px 10px 0 0;
                    width: 12px;
                    height: 12px;
                    background: url("../../assets/images/promotion/arrow.png") no-repeat;
                    background-size: cover;
                }
            }

            .input {
                flex: 1;
                position: relative;
                display: flex;
                align-items: center;

                &::before {
                    content: "";
                    width: 1px;
                    height: 16px;
                    background-color: #e8ecf1;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .btn {
                margin: 0 3px;
                width: 50px;
                height: 30px;
                background: url("../../assets/images/promotion/btn.png") no-repeat;
                background-size: cover;
            }
        }
    }
}

.land-filter {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 201;
    top: 44px;
    background-color: #fff;

    .filter-item {
        width: 20%;
        height: 100%;

        .filter-trigger {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .text {
                font-weight: bold;
                font-size: 13px;
                color: #19233d;
                margin-right: 4px;
            }

            .arrow {
                width: 12px;
                height: 12px;
                background: url("../../assets/images/promotion/tab-down.png") no-repeat;
                background-size: cover;
            }
        }

        .filter-panel {
            position: absolute;
            width: 100%;
            height: 0;
            left: 0;
            top: 40px;
            transition: all 0.3s;
            background-color: #fff;
            z-index: 2;
            opacity: 0;
            visibility: hidden;

            .options {
                padding: 16px;
                height: auto;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 8px;

                .option {
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    font-size: 13px;
                    background: #efefef;
                    color: #333333;
                    border-radius: 2px;
                }

                .option-selected {
                    font-weight: bold;
                    background: #e0eff0;
                    color: #008c8c;
                }
            }

            .pirce-opts {
                padding: 10px 15px;
            }

            .custom {
                position: relative;
                padding: 10px 15px;
                height: auto;
                display: flex;
                flex-direction: column;

                .custom-label {
                    font-size: 15px;
                    font-weight: bold;
                    color: #333;
                }

                .custom-range {
                    padding: 16px 0;
                    display: flex;
                    align-items: center;
                    font-size: 13px;
                    font-weight: bold;
                    color: #19233d;

                    .range-text {
                        padding: 0 4px;
                    }
                }

                .range-error {
                    position: absolute;
                    bottom: 8px;

                    .error-text {
                        color: var(--el-color-danger);
                        font-size: 12px;
                        font-weight: 500;
                    }
                }
            }

            .operations {
                padding: 4px 15px 20px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-gap: 15px;

                .btn {
                    height: 42px;
                    line-height: 42px;
                    border-radius: 4px;
                    font-size: 16px;
                    font-weight: bold;
                    text-align: center;
                }

                .btn-reset {
                    background: #fff;
                    border: 1px solid #cfd3de;
                    color: #666666;
                }

                .btn-confirm {
                    background: linear-gradient(192deg,
                            rgba(1, 211, 150, 1) 0%,
                            rgba(0, 194, 237, 1) 100%);
                    color: #fff;
                }
            }

            .sorts {
                padding: 10px 0 6px 0;
                width: 100%;
                display: flex;
                flex-direction: column;

                .sort {
                    padding: 0 20px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 13px;
                    color: #333333;
                }

                .sort-selected {
                    position: relative;
                    font-weight: bold;
                    color: #008c8c;
                    background: #e0eff0;

                    &::after {
                        content: "";
                        position: absolute;
                        right: 20px;
                        top: 12px;
                        width: 16px;
                        height: 16px;
                        background: url("../../assets/images/promotion/right.png") no-repeat;
                        background-size: cover;
                    }
                }
            }

            .tabs {
                border-top: 0.5px solid #ebebeb;
                margin-bottom: 16px;
                width: 100%;
                height: auto;
                display: flex;

                .right-content {
                    width: 100%;
                    height: 100%;

                    .content-label {
                        padding: 13px 0 0 16px;
                        font-size: 15px;
                        font-weight: bold;
                        color: #333;
                    }

                    .content-range {
                        position: relative;
                        padding: 2px 16px 16px 16px;
                        display: flex;
                        align-items: center;
                        font-size: 13px;
                        font-weight: bold;
                        color: #19233d;

                        .range-text {
                            padding: 0 4px;
                        }

                        .range-error {
                            position: absolute;
                            bottom: 0;

                            .error-text {
                                color: var(--el-color-danger);
                                font-size: 12px;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }

            .cascader {
                width: 100%;
                height: 300px;
                display: flex;
                border-top: 0.5px solid #ebebeb;
                overflow: hidden;

                .cascader-part {
                    flex: 1;
                    flex-grow: 1;
                    overflow-y: auto;
                    transition: all .2s;

                    &:nth-child(1) {
                        background-color: #EEEEEE;
                    }

                    &:nth-child(2) {
                        background-color: #F2F2F2;
                    }

                    &:nth-child(3) {
                        background-color: #F8F8F8;
                    }

                    &:nth-child(4) {
                        background-color: #FFF;
                    }

                    &__column {
                        .column-node {
                            height: 48px;
                            line-height: 48px;
                            padding-left: 10px;
                            font-size: 14px;
                            color: #333;
                            display: flex;
                            align-items: center;
                            overflow: hidden;

                            .node-text {
                                flex: 1;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .check-circle {
                                width: 28px;
                                height: 28px;
                                position: relative;

                                &::after {
                                    content: '';
                                    width: 14px;
                                    height: 14px;
                                    box-sizing: border-box;
                                    border-radius: 50%;
                                    border: solid 1px #ddd;
                                    background-color: #fff;
                                    position: absolute;
                                    left: 7px;
                                    top: 7px;
                                    transition: all .3s;
                                }

                            }

                            &.is-extend {
                                position: relative;
                                background-color: #E0EFF0;
                                color: #008C8C;
                                font-weight: 600;

                                &::before {
                                    content: '';
                                    width: 3px;
                                    height: 18px;
                                    background-color: #008C8C;
                                    border-top-right-radius: 15px;
                                    border-bottom-right-radius: 15px;
                                    position: absolute;
                                    left: 0;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }

                                .node-text {
                                    color: #008C8C;
                                }

                                .check-circle {
                                    &::after {
                                        border-color: #008C8C;
                                    }
                                }
                            }

                            &.is-checked {
                                .check-circle {
                                    &::after {
                                        border: solid 5px #008C8C;
                                    }
                                }
                            }
                        }
                    }

                    &__empty {
                        margin-top: 52px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .img {
                            width: 50px;
                            height: 50px;
                            background: url("../../assets/images/promotion/no-data.png") no-repeat;
                            background-size: cover;
                        }

                        .text {
                            margin-top: 5px;
                            color: #999;
                            font-size: 14px;
                        }
                    }
                }

                .cascader-part::-webkit-scrollbar {
                    width: 3px !important;
                }

                .cascader-part::-webkit-scrollbar-thumb {
                    background-color: rgba(144, 147, 153, 0.3);
                }
            }
        }

        &.is-active {
            .text {
                color: #008c8c;
            }

            .arrow {
                width: 12px;
                height: 12px;
                background: url("../../assets/images/promotion/tab-up.png") no-repeat;
                background-size: cover;
            }

            .filter-panel {
                opacity: 1;
                visibility: visible;
                top: 38px;
                height: auto;
            }
        }
    }
}

.require-btn {
    position: absolute;
    top: 95px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: url("../../assets/images/promotion/require.png") no-repeat;
    background-size: cover;
    z-index: 180;
}

.smart-box {
    position: absolute;
    top: 155px;
    right: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(-192deg, #01D396 0%, #00C2ED 100%);
    box-shadow: 0 2px 16px 0 rgba(4, 47, 69, 0.12);
    z-index: 180;

    .box {
        width: 38px;
        height: 38px;
        background: url('') no-repeat center center;
        background-size: contain;
    }

    .badge {
        height: 16px;
        line-height: 16px;
        background: #FB561F;
        border-radius: 10px 10px 10px 0;
        padding: 0 5px;
        color: #fff;
        font-size: 12px;
        position: absolute;
        top: 0;
        right: 1px;
    }
}

.search-result {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 190;
    background: #F7F8FC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 5px;
    transition: all 0.3s;

    &__trigger {
        width: 100%;
        height: 18px;
        position: absolute;
        top: -14px;
        z-index: 999;

        &::before {
            content: "";
            width: 36px;
            height: 4px;
            background-color: #7c869c;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 2px;
            border-radius: 4px;
        }
    }

    &__item {
        border-radius: 10px;
        background-color: #fff;
        margin-bottom: 8px;
        display: flex;

        .cover {
            width: 120px;
            height: 106px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            margin-right: 15px;
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 8px 15px 8px 0;
            overflow: hidden;

            .title {
                font-size: 15px;
                color: #333333;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .location {
                display: flex;
                align-items: center;

                .icon {
                    margin: 4px 0;
                    width: 12px;
                    height: 12px;
                    background: url('') no-repeat center center;
                    background-size: contain;
                }

                .text {
                    flex: 1;
                    padding-left: 6px;
                    font-size: 14px;
                    line-height: 20px;
                    color: #666666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .tags {
                display: flex;

                .item {
                    margin-right: 6px;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 5px;
                    background: #eaf3f4;
                    color: #2f6f6f;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .item:last-child {
                    margin-right: 0;
                }
            }

            .digit {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                    font-size: 15px;
                    color: #f04c35;
                    font-weight: bold;
                    margin-right: 20px;
                }

                .area {
                    font-size: 14px;
                    color: #667289;
                }
            }
        }

        .info-row {
            width: 100%;
            display: flex;
            align-items: center;

            .info-img {
                margin: 15px;
                width: 42px;
                height: 42px;
                background: url("../../assets/images/promotion/info.png") no-repeat;
                background-size: cover;
            }

            .info-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: #999999;
                font-size: 12px;
                line-height: 21px;

                &__bold {
                    font-size: 15px;
                    font-weight: bold;
                    color: #333
                }
            }

            .info-arrow {
                margin: 20px;
                width: 10px;
                height: 10px;
                border-top: 2px solid #AAB3C0;
                border-right: 2px solid #AAB3C0;
                transform: rotate(45deg);
            }
        }
    }

    .current {
        border: 1.5px solid #24bdc9;
    }

    .no-data {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #667289;
        font-size: 14px;
        line-height: 20px;

        .no-data__img {
            margin-bottom: 4px;
            width: 124px;
            height: 80px;
            background: url("../../assets/images/promotion/search-none.png") no-repeat;
            background-size: cover;
        }

        .no-data__btn {
            margin-top: 20px;
            width: 144px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            background: linear-gradient(192deg, #01D396 0%, #00C2ED 100%);
            border-radius: 36px;
        }
    }
}
</style>
<style lang="scss">
.amap-info-close {
    display: none;
}

#cluster-marker {
    position: relative;
    padding: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #99e7e7);
    box-shadow: 0px 0px 4px 0px rgba(19, 42, 88, 0.2);

    .inner {
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: linear-gradient(180deg, #008c8c, #00c4c4);

        .content {
            width: max-content;
            padding: 4.5px 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: linear-gradient(#47acac, #049b9b, #00c4c4);
            font-size: 14px;
            color: #fff;
            line-height: 18px;

            .item {
                width: 100%;
                height: 50%;
                text-align: center;
            }
        }

        &::before {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border-top: 6px solid #00c4c4;
            border-left: 6px solid rgba(255, 255, 255, 0);
            border-right: 6px solid rgba(255, 255, 255, 0);
            top: 53px;
            left: calc(50% - 3px);
        }
    }

    &::before {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        border-top: 6px solid #a8e8e8;
        border-left: 6px solid rgba(255, 255, 255, 0);
        border-right: 6px solid rgba(255, 255, 255, 0);
        top: 56px;
        left: calc(50% - 3px);
    }
}

#single-marker {
    width: 30px;
    height: 38px;
    background: url("../../assets/images/promotion/def-marker.png") no-repeat;
    background-size: cover;
}

#single-marker-selected {
    width: 31px;
    height: 40px;
    background: url("../../assets/images/promotion/selected-marker.png") no-repeat;
    background-size: cover;
}

#info-marker {
    position: relative;
    padding: 5px 10px;
    width: 152px;
    height: 77px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(4, 47, 69, 0.25);

    .location {
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .number {
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        color: #667289;

        .label {
            width: 40px;
        }

        .value {
            flex: 1;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .red {
        color: #f04c35;
    }

    &::before {
        content: "";
        position: absolute;
        border-top: 6px solid #fff;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        top: 77px;
        left: 68px;
    }
}

.top-input {
    margin-left: 1px;
    font-size: 14px;

    .el-input__wrapper,
    .el-input__wrapper:hover,
    .el-input__wrapper.is-focus {
        box-shadow: none;
    }
}

.range-input {
    border-bottom: 1px solid #ebebeb;

    .el-input__wrapper,
    .el-input__wrapper:hover,
    .el-input__wrapper.is-focus {
        box-shadow: none;
    }

    .el-input__inner {
        text-align: center;
    }
}

.error-input {
    border-bottom: 1px solid var(--el-color-danger);
}

.search-result {
    .el-scrollbar__view {
        height: 100%;
    }
}
</style>
